// import { type } from '@testing-library/user-event/dist/type'
import React, { Component } from 'react'
import Captcha from 'react-captcha-code'
const numberCode = (n, m) => {  //动态生成验证码
    var str = ''
    for (var i = 0; i < 4; i++) {
        str += Math.round(Math.random() * (n - m) + m)
    }
    return str
}
export default class Captchas extends Component {
    constructor(props) {
        super(props)
        this.state = {
            code: numberCode(0, 9),
            type: true
        }
        this.codeInput = React.createRef()
    }
    handleClick = () => {
        this.setState({
            code: numberCode(0, 9)
        })
    }
    changeInput = () => {
        if (this.codeInput.current.value === this.state.code) {//验证码与输入值进行比较
            console.log("success")
            this.setState({
                type: false
            })
        }
        else
            console.log('failed')
    }
    // codecfn = () => {
    //     if (this.codec.value == this.state.code) {//验证码与输入值进行比较
    //         console.log("success")
    //     }
    //     else
    //         console.log('failed')
    // }
    render() {
        return (
            <div>
                {
                    !this.state.type ? '' :
                        <div style={{ background: 'rgba(0,0,0,.5)', width: '100%', height: '100vh', }}>
                            <Captcha onClick={this.handleClick} code={this.state.code} />
                            <br />
                            <input type="text" ref={this.codeInput} />
                            <button onClick={this.changeInput}> dd</button>
                            <br />
                            {/* <input type="text" ref={c => this.codec = c} />
                <button onClick={this.codecfn}> dd</button> */}

                        </div>
                }
            </div>
        )
    }
}

